import { CSSProperties, ReactNode } from "react";
interface Props {
  /**图标，传递一个图标的函数式组件，props至少包含style */
  Icon: (props: { style: CSSProperties } & Record<string, any>) => ReactNode;
  /**标题 */
  title: string;
  /**点击事件 */
  onClick?: (e: any) => any;
}
/**有图标和标题的选项卡 */
export default function IconItem({ Icon, title, onClick }: Props) {
  return (
    <div className="flex items-center border-b py-3 hoverColor cursor-pointer" onClick={onClick}>
      <div className="mx-3 h-[30px]  flexCenter">
        <Icon style={{ fontSize: 25, color: "#242424" }} />
      </div>
      <div className="text-[15px] leading-[30px]">{title}</div>
    </div>
  );
}
